<template>
  <div class="dt-select" :style="{ width: width }" ref="selectCompanyUser">
    <div class="dt-select-tags" @click="focus">
      <!--已选成员-->
      <div class="el-select">
        <div class="el-select__tags" v-if="isMultiple">
          <!--多选-->
          <span>
            <template v-for="(userId, index) in selectedUserIds">
              <span v-if="index < 10" class="el-tag el-tag--info el-tag--small el-tag--light" :key="userId">
                <span class="el-select__tags-text">{{ getRealName(userId) }}</span>
                <i class="el-tag__close el-icon-close" @click.stop="choose(userId)"></i>
              </span>
              <span v-else-if="index === 10" class="el-tag el-tag--info el-tag--small el-tag--light" :key="userId">
                <span class="el-select__tags-text">...</span>
              </span>
            </template>
          </span>
        </div>
        <el-input
          suffix-icon="el-icon-arrow-up"
          :readonly="true"
          :class="{ 'is-reverse': isFocus, 'is-wrap': isWrap }"
          :value="isMultiple ? (selectedUserIds[0] ? ' ' : '') : selectedUserIds[0] ? getRealName(selectedUserIds[0]) : ''"
          :placeholder="placeholder"
        /><!--单选-->
        <div class="dt-del-user" v-if="selectedUserIds[0] && getUserRole == 2 && type != 1" @click.stop="deleteUser">
          <i class="el-icon-close"></i>
        </div>
      </div>
    </div>
    <transition name="el-zoom-in-top">
      <div class="el-select-dropdown el-popper" x-placement="bottom-start" v-show="isFocus">
        <div class="el-scrollbar">
          <div class="dt-select-tab">
            <!--群成员-->
            <el-tabs v-model="activeName">
              <el-tab-pane label="" name="0">
                <!-- <el-input placeholder="请输入成员实名、手机号" v-model.trim="searchCom" size="mini" v-if="groupUserList.length">
                  <i slot="suffix" class="el-input__icon el-icon-search" @click="search('0')"></i>
                </el-input> -->
                <div class="dt-select-search">
                  <input type="text" placeholder="请输入成员实名、UID、手机号搜索" v-model.trim="searchCom" size="mini" />
                  <i class="el-icon-search" @click="search('0')"></i>
                </div>
                <div class="dt-select-list">
                  <ul>
                    <template v-for="(item, index) in groupUserList">
                      <li v-if="item.userRole != 1" :key="item.userId" v-show="item.isShow" :class="{ isSelect: item.userId === selectedUserIds[0] }">
                        <el-checkbox
                          v-if="isMultiple"
                          v-model="comCheckedList[index]"
                          @change="getSelectIds(item.userId)"
                          :disabled="getUnChecked('0', index)"
                        ></el-checkbox>
                        <span @click="choose(item.userId)">
                          <em>{{ item.userName }}{{ item.userRole == 2 && type != 1 ? ' (管理员)' : '' }}</em>
                          <em>{{ 'UID' + item.userId }}</em>
                          <em>{{ item.safePhone | filterPhone }}</em>
                          <!-- <em :title="item.companyName">{{ item.companyName || '暂无工作室或企业认证' }}</em> -->
                        </span>
                      </li>
                    </template>
                  </ul>
                  <div class="dt-select-null" v-if="isComNull">
                    <span>暂无数据</span>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="el-scrollbar__bar is-horizontal">
            <div class="el-scrollbar__thumb" style="transform: translateX(0%)"></div>
          </div>
          <div class="el-scrollbar__bar is-vertical">
            <div class="el-scrollbar__thumb" style="transform: translateY(0%)"></div>
          </div>
        </div>
        <div x-arrow="" class="popper__arrow"></div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  props: ['option'],
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid), //用户id
      isFocus: false,
      activeName: '0',
      /*****prop*******/
      width: this.option.width,
      placeholder: this.option.placeholder,
      isMultiple: this.option.isMultiple,
      maxSelect: this.option.maxSelect,
      //项目人员列表
      groupUserList: [],

      //企业的check列表
      comCheckedList: [],

      //已选ids
      selectedUserIds: [],
      // 1、转让群主2、设置群管理员
      type: this.option.type,
      /****prop********/
      searchCom: ''
    }
  },
  computed: {
    isWrap() {
      var names = this.selectedUserIds.map((item) => {
        return this.getRealName(item)
      })
      return names.join('').length > 15
    },
    isComNull() {
      return this.groupUserList.every((item) => {
        return item.isShow === false
      })
    },

    //获取发布订单人的userid
    demandUserId() {
      var demandUserItems = this.option.selectedUserList.filter((item) => {
        return item.isDemandUser === 1
      })
      return demandUserItems[0] ? demandUserItems[0].userId : ''
    },
    //获取群聊成员的角色1-群主 2-群管理 3-群成员
    getUserRole() {
      var userItems = this.option.selectedUserList.filter((item) => {
        return item.userId === this.selectedUserIds[0]
      })
      return userItems[0] ? userItems[0].userRole : ''
    }
  },
  filters: {
    filterSpec(val) {
      var str = ''
      if (val) {
        if (val.length > 15) {
          str = val.substring(0, 10) + '...' + val.substr(-5)
        } else {
          str = val
        }
      }
      return str
    },
    filterPhone(val) {
      if (val) {
        return val.substring(0, 3) + '****' + val.substring(7, 11)
      } else {
        return '--'
      }
    }
  },
  methods: {
    getRealName(userId) {
      var isExistItem = this.groupUserList.filter((item) => {
        return item.userId === userId
      })[0]
      return isExistItem && isExistItem.userName
    },
    focus() {
      this.isFocus = !this.isFocus
    },
    getUnChecked(type, index) {
      return this.selectedUserIds.length === this.maxSelect && !this.comCheckedList[index]
    },
    choose(userId) {
      if (this.isMultiple) {
        //多选
        var isExistCom = this.groupUserList.filter((item) => {
            return item.userId === userId
          })[0],
          indexCom = this.groupUserList.indexOf(isExistCom)

        if (indexCom > -1) {
          //在企业列表
          if (this.selectedUserIds.length !== this.maxSelect || this.comCheckedList[indexCom]) {
            this.comCheckedList.splice(indexCom, 1, !this.comCheckedList[indexCom])
            this.getSelectIds(userId)
          }
        }
      } else {
        //单选
        this.isFocus = false
        this.selectedUserIds.splice(0, 1, userId)
        this.$emit('select', '' + userId)
        //选完重置一下
        this.reset()
      }
    },
    deleteUser() {
      this.$emit('delete', '' + this.selectedUserIds[0])
    },
    getSelectIds(userId) {
      var index = this.selectedUserIds.indexOf(userId)
      if (index < 0) {
        this.selectedUserIds.push(userId)
      } else {
        this.selectedUserIds.splice(index, 1)
      }
      this.$emit('select', this.selectedUserIds.join())
    },
    search(type) {
      if (type === '0') {
        //项目 本地筛选
        this.groupUserList = this.groupUserList.map((item) => {
          if (
            (item.userName && item.userName.indexOf(this.searchCom) > -1 && item.userRole != 1) ||
            (item.safePhone && (item.safePhone + '').indexOf(this.searchCom) > -1 && item.userRole != 1) ||
            (item.userId && (item.userId + '').indexOf(this.searchCom) > -1 && item.userRole != 1)
          ) {
            item.isShow = true
          } else {
            item.isShow = false
          }
          return item
        })
      }
    },
    reset() {
      this.activeName = '0'
      this.isFocus = false
      this.searchCom = ''

      this.groupUserList = this.groupUserList.map((item) => {
        item.isShow = true
        return item
      })
    }
  },
  watch: {
    //监听option重新赋值变化
    option: {
      handler(newVal, oldVal) {
        //项目人员列表
        // this.groupUserList = this.option.groupUserList.map((item) => {
        //   item.isShow = true
        //   return item
        // })
        // this.groupUserList = [
        //   { userId: 214, realName: '林浪', companyName: '工总司111' },
        //   { userId: 215, realName: '鲍杰', companyName: '工总司222' },
        //   { userId: 216, realName: '张之壮', companyName: '工总司33333333333' }
        // ]
        this.groupUserList = this.option.groupUserList.map((item) => {
          item.isShow = true
          return item
        })

        //企业的check列表
        this.comCheckedList = this.option.groupUserList.map((item) => {
          return this.option.selectedUserList.some((element) => {
            return item.userId === element.userId
          })
        })

        //已选ids
        this.selectedUserIds = this.option.selectedUserList.map((item) => {
          return item.userId
        })
      },
      deep: true, //深度监听
      immediate: true
    }
  },
  mounted() {
    document.addEventListener('click', (e) => {
      if (this.isFocus && this.$refs.selectCompanyUser && !this.$refs.selectCompanyUser.contains(e.target)) {
        this.reset()
      }
    })
  }
}
</script>
<style scoped>
.dt-select {
  position: relative;
  display: inline-block;
}
.dt-select .el-select {
  width: 100%;
}
.dt-select .el-select__tags {
  max-width: 460px;
}
.dt-select .el-input >>> .el-icon-arrow-up {
  color: #c0c4cc;
  font-size: 14px;
  transition: transform 0.3s;
  transform: rotateZ(180deg);
  cursor: pointer;
}
.dt-select .el-input.is-reverse >>> .el-icon-arrow-up {
  transform: rotate(0deg);
}
.dt-select .el-scrollbar {
  padding: 0 20px 6px;
}
.dt-select .el-popper[x-placement^='bottom'] .popper__arrow {
  left: 35px;
}
.dt-select .el-select-dropdown {
  width: 100%;
}
/*.dt-select >>> .el-input__icon {
  cursor: pointer;
}
.dt-select >>> .el-input__icon:hover {
  color: #5976ef;
}*/
.dt-select-search {
  position: relative;
}
.dt-select-search input {
  padding: 0 30px 0 15px;
  border: 1px solid #dcdfe6;
  width: 451px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
}
.dt-select-search i {
  position: absolute;
  right: 12px;
  top: 13px;
  color: #c0c4cc;
  font-size: 12px;
}
.dt-select-list {
  margin-top: 8px;
  height: 260px;
  overflow: auto;
}
.dt-select-list li {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  display: flex;
  padding: 0 8px;
  border-bottom: 1px solid #e9eef7;
  font-size: 12px;
}
.dt-select-list li:hover {
  background-color: #f0f5ff;
}
.dt-select-list li .el-checkbox {
  margin-right: 8px;
}
.dt-select-list li span {
  flex: 1;
  display: flex;
}
.dt-select-list li span em:nth-child(1),
.dt-select-list li span em:nth-child(2) {
  width: 110px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dt-select-list li span em:nth-child(3) {
  flex: 1;
  text-align: right;
}
.dt-select-list li.isSelect span em {
  color: #2f54eb;
}
.dt-select-tab >>> .el-input--mini .el-input__inner {
  border-color: #dcdfe6 !important;
}
.dt-select-tags >>> .el-input--medium.is-wrap .el-input__inner {
  height: 62px !important;
}
.dt-select-add {
  margin-top: 10px;
}

.dt-select-tab >>> .el-tabs__header {
  margin-bottom: 8px;
  height: 0;
  overflow: hidden;
}
.dt-select-null {
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.dt-del-user {
  position: absolute;
  right: 35px;
  top: -1px;
}
.dt-del-user .el-icon-close {
  border-radius: 50%;
  font-size: 10px;
  background-color: #c0c4cc;
  padding: 2px;
  color: #909399;
  cursor: pointer;
}
.dt-del-user .el-icon-close:hover {
  color: #fff;
  background-color: #909399;
}
</style>
